<template>

<el-dialog
        :model-value="dialogVisible"
        width="450px"
        
        :align-center="true"
        @close="cancel"
        :destroy-on-close="true"
    >
    <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                修改密码
            </div>
    </template>

    <div class="dialog__body">

        <el-form label-width="auto"  :rules="rules" :model="data_obj" ref="formRef">
               
                  <el-form-item label="原密码" class="label"  prop="password0">
                      <el-input type="password" show-password placeholder="请输入"  v-model="data_obj.password0"> </el-input>
                  </el-form-item>

                  <el-form-item label="新密码" class="label"   prop="password1">
                      <el-input type="password" show-password placeholder="请输入"  v-model="data_obj.password1"> </el-input>
                  </el-form-item>

                  <el-form-item label="确认密码" class="label"   prop="password2">
                      <el-input type="password" show-password placeholder="请输入"  v-model="data_obj.password2"> </el-input>
                  </el-form-item>

              
          </el-form>
    
        <div class="dialog__bottom">
        <div>
            <el-button plain @click="cancel" size="large">取消</el-button>
            <el-button type="primary" plain @click="confirm" size="large">确定</el-button>
        </div>
            
            
        </div>
    </div>

    

</el-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'
import { updatePassword } from '@/api/account.js'
import MessageBox from '@/utils/MessageBox'
import { sha256 } from 'js-sha256'


const rules = {
    password0:[
    { required: true, message: "请输入原密码", trigger: 'blur' },
    ],
    password1:[
    { required: true, message: "请输入新密码", trigger: 'blur' },
    ],
    password2:[
    { required: true, message: "请输入确认密码", trigger: 'blur' },
    ],
    
}
const formRef = ref(null);
const props = defineProps(['visible'])
const emit = defineEmits(['cancel', 'confirm'])
const fileInput = ref(null);
const dialogVisible = ref(props.visible)
watch(() => props.visible, (value) => {
    if (value){
        dialogVisible.value = true
    }else{
        emit('cancel')
        dialogVisible.value = false
    }
    // value && (dialogVisible.value = true)
})

const data_obj = ref({})
// watchEffect(() => data_obj.value = props.instance)

// 修改密码
async function confirm(){

    formRef.value.validate( async (valid) => {
        if (valid) {
            // 验证过了提交表单
            var req_data = {
                password0: sha256(data_obj.value.password0),
                password1: sha256(data_obj.value.password1),
                password2: sha256(data_obj.value.password2),
            }
            var res = await updatePassword(req_data)
            if(res.code == 1){
                
                MessageBox.success('修改成功')
                cancel()
            }   
            
        } else {
        return false;
        }
    });

}
onMounted(()=>{
    
})


function cancel(){
    data_obj.value = {}
    emit('cancel')
    dialogVisible.value = false
}


onMounted(()=>{
    
})

</script>

<style lang="scss" scoped>


.dialog__body{
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.user__avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    .edit__avatar{
        cursor: pointer;
        width: 100px;
        height: 40px;
        border-radius: 40px;
        border: 1px solid var(--wchime-color-text);

        display: flex;
        justify-content: center;
        align-items: center;
    }
    img{
        width: 160px;
        height: 160px;
        border-radius: 80px;
        overflow: hidden;
        object-fit: cover;
    }
    
}
.el-form{
        width: 80%;
        .el-form-item{
            width: 100%;

        }
    }

</style>


















